<!--
 * @Description: 
 * @version: 
 * @Author: wind.wang
 * @Date: 2024-02-03 15:59:15
 * @LastEditors: wind.wang
 * @LastEditTime: 2024-02-03 17:57:16
-->
<template>
  <div class="common-header">
    <p class="title" @click="goToIndexPage">学生信息管理系统</p>
    <div class="user-p"><p>欢迎您，{{ userInfo.username }}</p><el-button @click="logout" link>退出登录</el-button></div>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import emitter from '@/utils/mitt';

const router = useRouter();

const instance = getCurrentInstance();

const userInfo = reactive({})

onMounted(() => {
  if(localStorage.getItem('userInfo')) {
     let user = JSON.parse(localStorage.getItem('userInfo'));
     Object.assign(userInfo, { ...user })
  }

  emitter.on('login', () => {
    let user = JSON.parse(localStorage.getItem('userInfo'));
    Object.assign(userInfo, { ...user })
  })
})

const goToIndexPage = () => {
  router.push('/');
}

const logout = () => {
  localStorage.clear();
  router.push('/login');
  emitter.emit('logout');
}
</script>

<style lang="scss" scoped>
.common-header {
  width: 100%;
  padding: 0 20px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-bottom: 1px solid #fff;
  background: #79ccea;
  .title {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
  }
  :deep .user-p {
    font-size: 16px;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    .el-button {
      margin-left: 20px;
    }
  }
}
</style>